import { DrawerForm, ProForm, ProFormTextArea } from '@ant-design/pro-components';

interface PreviewDrawerEditProps {
  data: NewsData.PageResult;
  onSave(title: string, generalization: string): void;
}
const PreviewDrawerEdit: React.FC<PreviewDrawerEditProps> = ({ data, onSave }) => {
  return (
    <DrawerForm<{
      title: string;
      generalization: string;
    }>
      title="编辑"
      trigger={
        <a key="edit" type="primary">
          编辑
        </a>
      }
      drawerProps={{
        destroyOnClose: true,
        maskClosable: false,
      }}
      initialValues={{
        title: data.title,
        // generalization: data.generalization == undefined ? data.content : data.generalization,
      }}
      onFinish={async (values) => {
        onSave(values.title.trim(), values.generalization.trim());
        return true;
      }}
    >
      <ProFormTextArea
        width="xl"
        label="标题"
        name="title"
        fieldProps={{
          style: { width: `100%` },
        }}
      />
      <ProFormTextArea
        width="xl"
        label="预览"
        name="generalization"
        fieldProps={{
          rows: 10,
          style: { width: `100%` },
        }}
      />

      <a href={data.sourceUrl} target="_blank" rel="noopener noreferrer" key="view">
        原文链接
      </a>
      <h2>标题</h2>
      <div>{data.title}</div>
      <h2>摘要</h2>
      <div>{data.summaries}</div>
      <h2>正文</h2>
      <div dangerouslySetInnerHTML={{ __html: data.content }}></div>
    </DrawerForm>
  );
};

export default PreviewDrawerEdit;
